/**
 * @file retailEducation/Home.js
 *
 * @author
 */

import React, { PropTypes, PureComponent } from 'react';
import { connect } from 'react-redux';
import { autobind } from 'core-decorators';
import { withRouter, routerRedux } from 'dva/router';
import { Tabs } from 'antd';
import _ from 'lodash';
import moment from 'moment';

import Tabtitle from '../../../components/common/TabTitle';
import FeatureList from '../../../components/retailEducation/FeatureList';
import RetailDetail from '../../../components/retailEducation/RetailDetail';
import DetailPanel from '../../../components/retailEducation/DetailPanel';
import { dateConvert } from '../../../utils/helper';
import constants from '../../../config/constants';

import styles from './home.less';

const params = {
  pagesize: constants.pagesize || 15,
};

const nowDate = new Date();

const mapStateToProps = state => ({
  list: state.retailFeatureList.list,
  page: state.retailFeatureList.page,
  currentDataDate: state.retailFeatureList.currentDataDate,
  featuresMapping: state.retailFeatureList.featuresMapping,
  selectedTrader: state.retailFeatureList.selectedTrader,
  selectedClosedPositions: state.closedPositions.selected,
  isDetailOpen: state.retailFeatureList.isDetailOpen,
  isClosedPositionsDetailOpen: state.closedPositions.isDetailOpen,
});

const mapDispatchToProps = {
  getFeatureList: query => ({
    type: 'retailFeatureList/getFeatureList',
    payload: query || {},
  }),
  getFeaturesMapping: query => ({
    type: 'retailFeatureList/getFeaturesMapping',
    payload: query || {},
  }),
  changeTrader: selectedRow => ({
    type: 'retailFeatureList/changeTrader',
    payload: { selectedTrader: selectedRow },
  }),
  changeDetailOpen: open => ({
    type: 'retailFeatureList/changeDetailOpen',
    payload: { open },
  }),
  changeClosedPositionsDetailOpen: open => ({
    type: 'closedPositions/changeDetailOpen',
    payload: { open },
  }),
  push: routerRedux.push,
  replace: routerRedux.replace,
};

@connect(mapStateToProps, mapDispatchToProps)
@withRouter
export default class RetailEducationPort extends PureComponent {
  static propTypes = {
    getFeatureList: PropTypes.func.isRequired,
    getFeaturesMapping: PropTypes.func.isRequired,
    changeTrader: PropTypes.func.isRequired,
    changeDetailOpen: PropTypes.func.isRequired,
    changeClosedPositionsDetailOpen: PropTypes.func.isRequired,
    list: PropTypes.array.isRequired,
    page: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    push: PropTypes.func.isRequired,
    replace: PropTypes.func.isRequired,
  }

  static defaultProps = {
  }

  componentWillMount() {
    const {
      getFeatureList,
      getFeaturesMapping,
      location: { query: { begindate, enddate, currentpage, sortField, sortOrder, pagesize } },
    } = this.props;
    const nowBegindate = begindate || dateConvert(nowDate);
    const nowEnddate = enddate || dateConvert(nowDate);
    const condition = {
      ...params,
      begindate: nowBegindate,
      enddate: nowEnddate,
      currentpage: currentpage || 1,
    };
    if (pagesize) {
      condition.pagesize = pagesize;
    }
    if (sortField || sortOrder) {
      condition.sortField = sortField;
      condition.sortOrder = sortOrder;
    }
    getFeaturesMapping();
    getFeatureList(condition);
  }

  componentWillReceiveProps(nextProps) {
    const {
      getFeatureList,
      location: { query: { begindate, enddate, currentpage, sortField, sortOrder, pagesize, trader } },
    } = nextProps;
    const { location: { query: preQuery } } = this.props;

    if (!_.isEqual(currentpage, preQuery.currentpage)
      || !_.isEqual(sortField, preQuery.sortField)
      || !_.isEqual(sortOrder, preQuery.sortOrder)
      || !_.isEqual(pagesize, preQuery.pagesize)
      || !_.isEqual(trader, preQuery.trader)) {
      const nowBegindate = begindate || dateConvert(nowDate);
      const nowEnddate = enddate || dateConvert(nowDate);
      const condition = {
        ...params,
        begindate: nowBegindate,
        enddate: nowEnddate,
        currentpage: currentpage || 1,
      };
      if (pagesize) {
        condition.pagesize = pagesize;
      }
      if (sortField || sortOrder) {
        condition.sortField = sortField;
        condition.sortOrder = sortOrder;
      }
      if (trader) {
        condition.trader = trader;
      }
      getFeatureList(condition);
    }
  }

  // 时间选择
  @autobind
  onFormQuery(values) {
    const {
      location: { pathname, query },
      replace,
      getFeatureList,
    } = this.props;
    replace({
      pathname,
      query: {
        ...query,
        begindate: values.startTime,
        enddate: values.endTime,
        currentpage: 1,
      },
    });
    getFeatureList({
      ...params,
      ...query,
      begindate: values.startTime,
      enddate: values.endTime,
      currentpage: 1,
    });
  }
  handleRowClick = (row) => {
    const { changeTrader, selectedTrader } = this.props;
    if (row !== selectedTrader) {
      changeTrader(row);
    }
  }
  render() {
    const { currentDataDate, changeTrader, isDetailOpen, changeDetailOpen,
      isClosedPositionsDetailOpen, changeClosedPositionsDetailOpen,
      featuresMapping, selectedTrader, selectedClosedPositions, location } = this.props;
    const nowBegindate = location.query.begindate || dateConvert(nowDate);
    const nowEnddate = location.query.enddate || dateConvert(nowDate);
    const dataDate = moment(currentDataDate).format('YYYY-MM-DD');
    const trader = selectedTrader && selectedTrader.trader;
    return (
      <div className="retailEducation">
        <Tabtitle value={'智能教学'} />
        <div className="page-combiprofit-home content-inner">
          { !isDetailOpen &&
            <FeatureList
              {...this.props}
              dataDate={dataDate}
              onRowClick={this.handleRowClick}
            />}
          { isDetailOpen && <DetailPanel onClickBack={(e)=>{
            changeDetailOpen(false);
          }}>
            <h3 className={styles.title}>
              <span>用户 {trader}</span>
              <span className={styles.subTitle}>数据日期：{dataDate}</span>
            </h3>
            <div>
              <RetailDetail features={selectedTrader} featuresMapping={featuresMapping} />
            </div>
          </DetailPanel>
          }
        </div>
      </div>
    );
  }
}

